<script setup>
import { ref } from "vue";
import Enlarge from "./Enlarge.vue";

const show = ref(false);

const DetailsFn = () => {
  show.value = true; // 显示弹窗
};
</script>

<template>
  <div class="width flex flex-wrap">
    <div @click="DetailsFn" v-for="(item, index) in 10" :key="index" class="w-[50%] h-[230px]" :class="index < 2 ? '' : 'mt-[10px]'">
      <div class="w-[165px] m-auto h-full backgroundColor roundCorner">
        <div class="w-[145px] h-full m-auto flex items-center justify-center flex-col text-center">
          <van-image
              width="145"
              height="145"
              src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
          />
          <div class="w-full mt-[10px] text-ellipsis whitespace-nowrap overflow-hidden">
            哈哈哈哈哈哈嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿嘿和嘿嘿和和
          </div>
          <div class="elasticity mt-[10px]">
            <div class="text-[#FF4000]">￥140.99</div>
            <div class="text-[10px] text-[#999]">存库100台</div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <van-popup :round="true" v-model:show="show" :closeable="true">
    <Enlarge></Enlarge>
  </van-popup>
</template>

